<template>
  <!-- 日历 -->
  <div class="calendar">
    <header>
      <div class="month">{{ months[month] }}</div>
      <div class="year">{{ year }} </div>
    </header>
    <main>
      <div class="week">
        <ul>
          <li v-for="(item, index) in week" :key="index" :class="{ 'isWeek': index === new Date().getDay() - 1 }">{{
            item
          }}
          </li>
        </ul>
      </div>
      <div class="day">
        <div class="line" v-for="(items, index) in dayFun(year, month)" :key="index">
          <span v-for="(item, index) in items" :key="index" :class="{ 'isToday': item === new Date().getDate() }">
            {{ item }}
          </span>
        </div>
      </div>
    </main>
    <footer>
      <span @click="lastMonth">{{ '<' }} 上个月</span> <span @click="today">今天</span> <span @click="nextMonth">下个月 ></span>
    </footer>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
let months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
let week = reactive(['一', '二', '三', '四', '五', '六', '日'])
let year = ref(new Date().getFullYear())
let month = ref(new Date().getMonth())
const dayFun = (year, month) => {
  // 获取这个月有多少天
  let day = new Date(year, month + 1, 0).getDate()
  // 存放所有天的数组(从1到day)
  let allDay = []
  for (let i = 1; i <= day; i++) {
    allDay.push(i)
  }
  // 获取这个月第一天是星期几
  let firstDay = new Date(year, month, 1).getDay() || 7
  // 获取这个月一共有几周
  let weekCount = Math.ceil((day + firstDay) / 7)
  // 获取上个月有多少天
  let lastDay = new Date(year, month, 0).getDate()
  // 把上个月的日期放到数组中
  for (let i = 0; i < firstDay - 1; i++) {
    allDay.unshift(lastDay - i)
  }
  const dateArray = [];
  // 把所有天放到二维数组中
  for (let row = 0; row < weekCount; row++) {
    dateArray.push(allDay.splice(0, 7));
  }
  // 把上个月的日期置空
  for (let i = 0; i < dateArray[0].length; i++) {
    if (dateArray[0][i] > 10) dateArray[0][i] = ' '
  }
  return dateArray
}

const lastMonth = () => {
  if (month.value === 0) {
    month.value = 11
    year.value--
  } else {
    month.value--
  }
}

const nextMonth = () => {
  if (month.value === 11) {
    month.value = 0
    year.value++
  } else {
    month.value++
  }
}

const today = () => {
  year.value = new Date().getFullYear()
  month.value = new Date().getMonth()
}


</script>

<style lang="scss" scoped>
.calendar {
  margin-top: .3333rem;
  background-color: #fff;
  width: 100%;
  padding: .3333rem .3333rem .1667rem;

  header {
    font-size: .3rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin-bottom: .1667rem;
  }

  main {
    .week {
      padding: .1667rem;

      ul {
        display: flex;
        justify-content: space-evenly;

        li {
          text-align: center;
          font-size: .2333rem;
          width: .5rem;
        }
      }

      .isWeek {
        color: #655021;
        font-weight: bold;
      }

      border-bottom: .0167rem solid #000;
    }

    .day {
      padding: .0833rem .1667rem;

      .line {
        display: flex;
        justify-content: start;
        gap: .115rem;

        span {
          text-align: center;
          font-size: .2333rem;
          width: .5rem;
          height: .5rem;
          line-height: .5rem;
        }

        .isToday {
          background-color: rgb(139, 208, 231);
          color: white;
          font-weight: bold;
        }
      }
    }
  }

  footer {
    display: flex;
    justify-content: space-between;
    margin: .0833rem 0;
    font-size: .2333rem;
    color: #999;

    span {
      cursor: pointer;
    }
  }
}
</style>